<template>
  <div>
    <HomeHeader />
    <div class="home-container">
      <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
        <div>
          <!-- 轮播 -->
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="banner in banners" :key="banner.id">
              <img :src="banner.picUrl" alt="" />
            </van-swipe-item>
          </van-swipe>
          <!-- /轮播 -->
          <!-- 宫格导航 -->
          <van-grid>
            <van-grid-item
              v-for="cate in cates"
              :key="cate.id"
              :icon="cate.icon"
              :text="cate.name"
              :to="{
                path: '/itemLists',
                query: {
                  cateId: cate.id,
                },
              }"
            />
          </van-grid>
          <!-- /宫格导航 -->
          <!-- 推荐商品列表 -->
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="我也是有底线的"
            :immediate-check="false"
            @load="reachBottom"
          >
            <Items :items="items" @enterDetail="enterDetail" @addCart="addCart" />
            <!-- /推荐商品列表 -->
          </van-list>
        </div>
      </van-pull-refresh>
    </div>
    <Tabbar />
  </div>
</template>

<script setup lang="ts" name="HomePage">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import Tabbar from "@/components/Tabbar.vue";
import HomeHeader from "./components/HomeHeader.vue";
import Items from "./components/Items.vue";
import { fetchHomeBanner, fetchCates, fetchItems } from "@a/index";
import type { ItemType, CateType } from "./types/index";
import useCartStore from "@s/cart";
const cartStore = useCartStore();
const router = useRouter();
// banner
const banners = ref<{ picUrl: string; id: number }[]>([]);
const getHomeBanner = () => {
  fetchHomeBanner().then((res) => {
    if (res.data.code === 0) {
      banners.value = res.data.data;
    }
  });
};
// banner
// 宫格导航
const cates = ref<CateType[]>([]);
const getCates = () => {
  fetchCates().then((res) => {
    if (res.data.code === 0) {
      cates.value = res.data.data;
    }
  });
};
// 宫格导航
// 首页推荐商品
// 分页参数
let page = 1;
let pageSize = 5;
// 触底加载中
const loading = ref(false);
const finished = ref(false);
// 触底事件
const reachBottom = () => {
  page++;
  getItems();
};
const items = ref<ItemType[]>([]);
const getItems = () => {
  fetchItems({
    page,
    pageSize,
  }).then((res) => {
    // 列表请求完成 去除 loading状态
    loading.value = false;
    // 结束下拉状态
    pullLoading.value = false;
    if (res.data.code === 0) {
      items.value = [...items.value, ...res.data.data.result];
    }
    if (res.data.code === 700) {
      // 列表已经没有商品了
      finished.value = true;
    }
  });
};
// 下拉刷新
const pullLoading = ref(false);
// 下拉刷新事件
const onRefresh = () => {
  // 初始化上拉加载的数据
  page = 1;
  items.value = [];
  // 将 上拉结束状态 变成false
  finished.value = false;
  getItems();
};

// 点击商品跳转详情
const enterDetail = (id: number) => {
  router.push({
    path: "/detail",
    query: {
      id,
    },
  });
};
// 点击加入购物车
const addCart = (id: number) => {
  cartStore.addCart({
    goodsId: id,
    number: 1,
  });
};
onMounted(() => {
  getHomeBanner();
  getCates();
  getItems();
});
</script>

<style scoped lang="scss">
.home-container {
  padding-top: 40px;
  padding-bottom: 50px;

  .my-swipe {
    width: 10rem;
    height: 5rem;

    img {
      width: 10rem;
      height: 5rem;
    }
  }
}
</style>
